<template>
	<view class="product-box">
		<u-form>
			<u-form-item label-width="110" label="菜品名称:" prop="name" borderBottom ref="item1">
				<u-input
					:customStyle="{
						backgroundColor: '#F3F4F6',
						padding: '5rpx 20rpx',
						color: '#999'
					}"
					v-model="searchVal"
					border="none"
				>
					<template #suffix>
						<view style="display: flex; align-items: center">
							<u-icon @click="onSearch('search')" name="search" color="#909399" size="24"></u-icon>
							<u-icon style="margin-left: 15rpx" @click="onSearch('reset')" name="reload" color="#909399" size="22"></u-icon>
						</view>
					</template>
				</u-input>
			</u-form-item>
		</u-form>
		<scroll-view scroll-x style="padding: 20rpx; width: 100%">
			<u-tabs
				:current="tableCurrent"
				:list="categoryList"
				:label="item.name"
				:value="item.id"
				@change="changeTab"
				lineColor="#f4c45d"
				:activeStyle="{ color: '#f3c45d' }"
			></u-tabs>
		</scroll-view>
		<scroll-view style="max-height: 600rpx" scroll-y>
			<u-checkbox-group name="id">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="50" align="center"><u-checkbox @change="onchangeAll" style="transform: scale(0.7)" active-color="#f3c45d" :checked="checked" /></uni-th>
						<uni-th width="120" align="center">菜品名称</uni-th>
						<!-- <uni-th align="center" width="90">用餐人数</uni-th>
						<uni-th align="center" width="90">绑定数量</uni-th> -->
						<!-- <uni-th width="180" align="center">设置</uni-th> -->
					</uni-tr>
					<uni-tr v-for="(item, index) in tableList" :key="item.id">
						<uni-td align="center">
							<view>
								<u-checkbox @change="checkRow($event, item)" active-color="#f3c45d" :name="item.id" :checked="item.checked" style="transform: scale(0.7)" />
							</view>
						</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<!-- <uni-td align="center">{{ item.manQty }}</uni-td>
						<uni-td align="center">{{ item.bingdingCount }}</uni-td> -->
						<!-- <uni-td align="center">
		        <view class="uni-group">
		          <button
		            style="height: 40rpx; line-height: 40rpx; background-color: #f3c45d; border-color: #f3c45d; color: #fff"
		            class="uni-button"
		            size="mini"
		            type="default"
		            @click="toEdit(item.id)"
		          >
		            修改
		          </button>
		          <button style="height: 40rpx; line-height: 40rpx" class="uni-button" size="mini" type="warn" @click="toDel(item.id)">删除</button>
		        </view>
		      </uni-td> -->
					</uni-tr>
				</uni-table>
			</u-checkbox-group>
		</scroll-view>
		<view class="uni-pagination-box" v-if="pagination">
			<uni-pagination show-icon :page-size="data.pageSize" :current="data.pageCurrent" :total="data.total" @change="change" />
		</view>

		<view class="submit-btn" @click="onSubmit">保存</view>
	</view>
</template>

<script>
import { nextTick } from 'vue';
export default {
	props: {
		data: {
			type: Object,
			default: {}
		},
		categoryList: {
			type: Array,
			default: []
		},
		pagination: {
			type: Boolean,
			default: false
		},
		tableCurrent: {
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			searchVal: '',
			checkboxValue1: [],
			checked: false, // 全部是否勾选
			tableList: []
		};
	},
	watch: {
		data: {
			handler(newValue, oldValue) {
				this.tableList = newValue.list || [];
				setTimeout(() => {
					if (this.tableList.length > 0) {
						this.tableList.some((v) => v.checked) ? (this.checked = true) : (this.checked = false);
					}
				}, 0);
			},

			deep: true,
			immediate: true
		}
	},

	methods: {
		change(e) {
			this.$emit('changeNumber', e);
		},
		onSearch(type) {
			if (type === 'search') {
				this.$emit('search', this.searchVal);
			} else {
				this.searchVal = '';
				this.$emit('search', this.searchVal);
			}
		},
		checkRow(e, item) {
			// console.log(e, item);
			item.checked = e;
		},
		onSubmit() {
			this.$emit('checkProduct', this.tableList);
		},
		onchangeAll(e) {
			this.tableList.forEach((v) => {
				if (e) {
					this.$set(v, 'checked', true);
				} else {
					this.$set(v, 'checked', false);
				}
			});
			this.tableList.some((v) => v.checked) ? (this.checked = true) : (this.checked = false);
		},
		changeTab(e) {
			const arr = [];
			this.tableList.forEach((v) => {
				if (v.checked) arr.push(v);
			});
			// console.log(arr);
			this.$emit('changeCategory', { id: e.id, arr });
		}
	}
};
</script>

<style lang="scss" scoped>
.product-box {
	width: 97vw;
	padding: 20rpx;
	min-height: 300rpx;
	.submit-btn {
		width: 200rpx;
		line-height: 60rpx;
		margin: 20rpx auto;
		border-radius: 30rpx;
		background-color: #f3c45d;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
	}
}
</style>
